import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';

class TabbarItem {
  title: string;
  icon: string;
  active: boolean;
  link: string;
  constructor(title: string, icon: string, link: string) {
    this.title = title;
    this.icon = icon;
    this.link = link;
  }
}

@Component({
  selector: 'app-tabbar',
  templateUrl: './tabbar.component.html',
  styleUrls: ['./tabbar.component.css']
})
export class TabbarComponent implements OnInit {
  tabList: TabbarItem[];

  constructor(private router: Router) {
    this.tabList = [
      new TabbarItem(
        'gif',
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=27209829,2005944323&fm=21&gp=0.jpg',
        '/gif'
      ),
      new TabbarItem(
        '视频',
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=27209829,2005944323&fm=21&gp=0.jpg',
        '/video'
      ),
      new TabbarItem(
        '图片',
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=27209829,2005944323&fm=21&gp=0.jpg',
        '/photo'
      )
    ]
  }

  ngOnInit() {
    this.tabList[0].active = true;
  }

  setActive(tab: TabbarItem) {
    // console.log('tab:', tab);
    this.tabList.forEach((t) => t.active = false);
    tab.active = true;
    this.router.navigate([tab.link]);
  }

}
